<template>
  <div class="content">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div class="main">
          <div class="left">
            <div class="leftBox">
              <div class="headerBox">
                <!-- <div class="order-number">总单量：6</div> -->
                <div>
                  <p>
                    <span>订单下单日期</span>
                    <el-date-picker
                      v-model="value1"
                      type="daterange"
                      class="edit_button"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </p>
                  <p>
                    <el-dropdown class="edit_button">
                      <el-button type="primary" plain>
                        订单筛选<i
                          class="el-icon-arrow-down el-icon--right"
                        ></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>黄金糕</el-dropdown-item>
                        <el-dropdown-item>狮子头</el-dropdown-item>
                        <el-dropdown-item>螺蛳粉</el-dropdown-item>
                        <el-dropdown-item>双皮奶</el-dropdown-item>
                        <el-dropdown-item>蚵仔煎</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </p>
                  <p>
                    <el-button type="primary" class="edit_button"
                      >查询</el-button
                    >
                    <el-button class="edit_button" plain>重置</el-button>
                  </p>
                </div>
                <div>
                  <p>
                    <span>路线模板</span>
                    <i class="el-icon-edit"></i>
                  </p>
                </div>
              </div>
              <div id="container" class="map"></div>
            </div>
          </div>
          <div class="middle"></div>
          <div class="right">
            <div class="rightBox">
              <div class="tabBox">
                <p :class="{ active: itemIndex == 1 }" @click="getTab(1)">
                  运单列表
                </p>
                <p :class="{ active: itemIndex == 2 }" @click="getTab(2)">
                  路线列表
                </p>
              </div>
              <div class="tabContent" v-if="itemIndex === 1">
                <div class="tabSearch">
                  <span>发货日期</span>
                  <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <i class="el-icon-caret-bottom"></i>
                </div>
                <div class="contentText">
                  <el-checkbox-group v-model="checkList">
                    <ul class="itemText">
                      <li class="checkButton">
                        <el-checkbox label=""></el-checkbox>
                        <p>TW230317145608100002</p>
                      </li>
                      <li>
                        <p>配送路线/片区:</p>
                        <p>商业园区</p>
                      </li>
                      <li>
                        <p>承运商:</p>
                        <p>商业园区</p>
                      </li>
                      <li>
                        <p>司机:</p>
                        <p>
                          <span>朱安刚</span>
                          <span>17389103430</span>
                          <span>陕A35H9K</span>
                        </p>
                      </li>
                      <li>
                        <p>总量:</p>
                        <p>
                          <span>0件</span>
                          <span>0kg</span>
                          <span>2.31m³</span>
                        </p>
                      </li>
                      <li>
                        <p>运单状态:</p>
                        <p>创建</p>
                      </li>
                      <li>
                        <p style="width: 50%">体积满载率:<span>0%</span></p>
                        <p style="width: 50%">重量满载率:<span>0%</span></p>
                      </li>
                      <li>
                        <p style="width: 50%">数量满载率:<span>0%</span></p>
                        <p style="width: 50%">业务满载率:<span>0%</span></p>
                      </li>
                      <li>
                        <p style="width: 50%">地址满载率:<span>0%</span></p>
                        <p
                          style="
                            color: rgb(26, 167, 236);
                            cursor: pointer;
                            width: 50%;
                          "
                        >
                          刷新满载率:<i class="el-icon-refresh-right"></i>
                        </p>
                      </li>
                      <li>
                        <el-button type="primary" class="edit_btn" plain
                          >轨迹</el-button
                        >
                        <el-button type="primary" class="edit_btn" plain
                          >详情</el-button
                        >
                        <el-button type="primary" class="edit_btn" plain
                          >框选订单</el-button
                        >
                        <el-button type="primary" class="edit_btn" plain
                          >派发</el-button
                        >
                        <el-button type="danger" class="edit_btn" plain
                          >危险按钮</el-button
                        >
                      </li>
                    </ul>
                  </el-checkbox-group>
                </div>
                <div class="footer">
                  <el-checkbox label=""></el-checkbox>
                  <el-dropdown>
                    <el-button type="primary" class="editf_button">
                      批量操作
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>批量删除</el-dropdown-item>
                      <el-dropdown-item>批量派发</el-dropdown-item>
                      <el-dropdown-item>运单合并</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-button type="primary" class="editf_button"
                    >运单调整</el-button
                  >
                  <el-button
                    class="edit_button"
                    @click="drawer = true"
                    type="primary"
                    style="margin-left: 16px"
                  >
                    新增
                  </el-button>
                  <el-drawer
                    title="我是标题"
                    :visible.sync="drawer"
                    :direction="direction"
                    :before-close="handleClose"
                  >
                    <span>我来啦!</span>
                  </el-drawer>
                </div>
              </div>
              <div class="tabrtwo" v-if="itemIndex === 2">
                <p v-if="templateId=null" style="color: rgb(230, 162, 60);">请先选择路线模板</p>
                <p v-else>
                  
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "1c14fd00171ac4b016b4d311f166f4a4",
};
export default {
  data() {
    return {
      map: null,
      drawer: false,
      direction: "rtl",
      activeName: "first",
      checkList: [],
      itemIndex: 1,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
    };
  },
  created() {
    // 高德地图
    this.GaodeMap();
  },
  methods: {
    // footer的Drawer抽屉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 右边的tab切换
    getTab(index) {
      this.itemIndex = index;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 地图
    GaodeMap() {
      AMapLoader.load({
        key: "d252357b8bf633518c6f5b3e3c7658ea", //key值是key值 和安全密钥不同
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map("container", {
            viewMode: "2D", //  是否为3D地图模式
            zoom: 15, // 初始化地图级别
            center: [108.81438, 34.33175], //中心点坐标
            resizeEnable: true,
            mapStyle: "amap://styles/57994c871bb604a4c79184f5f65d8782",
          }).add(
            new AMap.Marker({
              map: this.map,
              position: [108.81438, 34.33175],
              offset: new AMap.Pixel(-10, -40),
            })
          );
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/router.scss";
</style>